<template>
    <ForOneHeader :enableBack="true" />
    <view class="walls-page">


        <!--one banner -->

        <view class="banner">
            <u-swiper height="450rpx" indicator keyName="image" circular class="index-swiper"
                :list="banner_url"></u-swiper>
        </view>


        <!-- four wall categories lays here in column direction -->
        <MidLayout>

            <view class="title">
                <view class="zh">柜板</view>
                <view class="en">Cabinet Board</view>
            </view>


            <view class="category-container button-container">

                <BounceButton v-for="(item, index) in buttons" :key="index" @mytap="handleTap(item.id)"
                    height="200rpx" :image="item.bg_url" />

                <u-gap></u-gap>
            </view>
        </MidLayout>


    </view>



    <page-container :show="show" @afterleave="on_close" mode="bottom" round="10" style="width: 100vw;">



        <u-sticky offset-top="0">
            <view class="tools">
                <view style="padding-left: 20rpx;">
                    {{ pop_up_title }}
                </view>
                <view style="padding-right: 20rpx;">
                    <view class="menu">
                        <button open-type="share" class="share-btn"
                            style="background-color: #fff;border: 1rpx solid #fff; ">
                            <u-icon name="share-square" size="26"></u-icon>
                        </button>
                        <view class="gap"></view>
                        <view>
                            <u-icon name="close" size="26" @tap="to_close"></u-icon>
                        </view>
                    </view>
                </view>


            </view>

        </u-sticky>

        <WallDetail :show="show" :index="index" style="height: 80vh;" @setTitle="setTitle"></WallDetail>

    </page-container>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'

import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { useSettingStore } from '@/store/setting'
import { shareUtils } from '@/utils/share'
import {getData} from '@/api/cupboard'
import WallDetail from '@/pages/cupboard/detail.vue'
const banner_url = ref('')
const buttons = ref([])
const show = ref(false)
const index = ref(-1)
const pop_up_title = ref('')
const to_close = () => {
    show.value = false
}

const props = defineProps({
    id: {
        type: Number,
        default: 0
    },
})

const on_close = () => {
    show.value = false
}



getData().then(res=>{
   
    
    banner_url.value  = res.banner_url
    buttons.value = res.data

    return true
}).then(res=>{

if(props.id>0){
    handleTap(props.id)
}

})



const handleTap = (_id) => {
    show.value = true
    index.value = _id
}

const setTitle = (title:String)=>{
    pop_up_title.value = title
}

const page = getCurrentPages().pop()

let path: string = page.route
onShareTimeline(() => {

    path = show.value ? `${path}?id=${index.value}` : path
    return {
        title:  show.value ? pop_up_title.value:null,
        imageUrl: null,
        path: shareUtils.buildPathQuery(path)
    }
})
onShareAppMessage(() => {
    path =show.value ? `${path}?id=${index.value}` : path
    return {
        title: show.value ? pop_up_title.value:null,
        imageUrl: null,
        path: shareUtils.buildPathQuery(path)
    }
})





</script>

<style scoped>
.share-btn::after {
    border: 0rpx solid #fff;
}

.share-btn {
    padding: 0rpx;
}

/* 按钮容器样式 */
.button-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10rpx;
    /* 按钮之间的间距 */
}

/* 按钮通用样式 */
.menu {
    display: flex;
    flex-direction: row;

}

.gap {
    width: 30rpx;
}

.tools {
    display: flex;
    flex-direction: row;
    padding: 20rpx 0;
    justify-content: space-between;
    width: 100vw;
}
</style>